<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--部门数据-->
            <el-col :span="4" :xs="24">
                <fileTreesCQBC @handleNodeClick="onTreeClick" :tableHeight="treeHeight" :isnoClick="isnoClick"
                    :menuId="menuId">
                </fileTreesCQBC>

            </el-col>
            <!--离线接收数据-->
            <el-col :span="20" :xs="24" v-show="isShow">
                <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">

                    <el-form-item label="接收时间">
                        <el-date-picker v-model="valueTime" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>

                <el-row :gutter="10" class="mb8" ref="refbut">
                    <el-col :span="1.5">
                        <el-button type="warning" plain icon="el-icon-printer" @click="handlePrintTap">打印</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="warning" plain icon="el-icon-download" @click="handleExport">导出</el-button>
                    </el-col>
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="queryTableTap"></right-toolbar>
                </el-row>
                <table class="custom-table">
                    <tr>
                        <th colspan="10">
                            <el-input class="titleName" v-model="titleName" size="mini" placeholder="标题自定义"
                                style="width:100%;" />
                        </th>
                    </tr>
                    <tr>
                        <th colspan="5" style="border-right:none;width:50%">
                            <div class="demo-input-suffix">
                                <label>单位名称:</label>
                                <!-- :disable-branch-nodes="true" -->
                                <treeselect v-if="isprint" v-model="userValue" :options="optionSelect" placeholder="请选择单位名称"
                                   :normalizer="normalizer" noOptionsText="暂无数据"
                                    style="width:300px;line-height: 30px;" @select="onChangeTap($event)" />
                                <div v-else>{{ userName }}</div>
                            </div>
                        </th>
                        <th colspan="5" style="border-left:none;width:50%">
                            <div class="demo-input-suffix">
                                <label>日期:</label>
                                <el-date-picker v-if="isprint" v-model="dateValue" type="date" placeholder="选择日期"
                                    format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                                </el-date-picker>
                                <div v-else>{{ dateValue }}</div>
                            </div>
                        </th>
                    </tr>
                    <!-- <tr>
                            <th colspan="10" style="text-align: left;">
                                <span>全宗名称：全宗一</span>
                                <span>总量：0.005G</span>
                                <span>总数：7</span>
                            </th>
                        </tr> -->
                    <tr>
                        <td>序号</td>
                        <td>标题</td>
                        <td>档号</td>
                        <td>数据包名称</td>
                        <td>数据包大小</td>
                        <td>存储位置</td>
                        <td>保管期限</td>
                        <td>接收时间</td>
                    </tr>
                    <tr v-for="(item, index) in tableData" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.TITLE }}</td>
                        <td>{{ item.DH }}</td>
                        <td>{{ item.NAME }}</td>
                        <td>{{ item.SIZE | changeType }}</td>
                        <td>{{ item.PATH }}</td>
                        <td>
                            <span v-for="itemBGQX in dict.type.BGQX" :key="itemBGQX.value">{{ itemBGQX.value ==
                                item.SAVE_TIME ? itemBGQX.label : '' }}</span>
                        </td>
                        <td>{{ item.RECEIVINGTIME }}</td>
                    </tr>
                    <tr>
                        <td>汇总</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>{{ countSize | changeType}}</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                    </tr>
                </table>
            </el-col>



            <el-col :span="20" :xs="24" v-show="!isShow" class="empty">
                <el-empty :image-size="200"></el-empty>
            </el-col>

        </el-row>



    </div>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { deptTreeNoDateScope } from "@/api/system/user";
import { tongjiList } from "@/api/cqbc/dataManage/dataTj.js"
import fileTreesCQBC from "@/components/fileTreesCQBC/index.vue"  //档案树
import treeHeight from '@/mixins/treeHeight'//计算左侧树的高度
export default {
    mixins: [treeHeight], // 混入方法
    archive_Dicts: ['BGQX'],
    components: {
        fileTreesCQBC, Treeselect
    },
    watch: {
        param: {
            handler(val) {
                
            },
            immediate: true
        }
    },
    data() {
        return {
            search: undefined,
            optionSelect: [],
            userValue: undefined,
            userName: undefined,
            dateValue: undefined,
            titleName: undefined,
            isprint: true,
            isnoClick: true, //防止树重复点击
            loading: false,
            // 显示搜索条件
            showSearch: true,
            isShow: false, //是否显示右侧数据 isShow:true,  //判断  著录项目内件按钮是否显示
            total: 0,
            valueTime: undefined,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                jssj1: undefined,
                jssj2: undefined
            },
            tableHeaderList: [], //table表头数据
            tableData: [],//table列表数据
            tableHeight: undefined,
            ids: undefined,
            single: "",
            multiple: "",
            param:'jstj', //接收统计=jsTj,出库统计=ckTj,  全宗统计=qzTj
            countSize:0
        }
    },
    filters: {
        changeType(val) {
            if (val == "0") return "0B";
            var k = 1024;
            var sizes = ["B", "KB", "MB", "GB", "TB"];
            // console.log('Math.log(val)', Math.log(val));
            // console.log('Math.log(k)', Math.log(k));
            let i = Math.floor(Math.log(val) / Math.log(k));//得出该数字的单位应该是kB?MB
            return (val / Math.pow(k, i)).toPrecision(3) + "" + sizes[i];
        },
    },
    created() {
        this.menuId = this.$route.meta.menuId
        this.deptTreeSelectPost();
    },


    methods: {

        //刷新页面
        queryTableTap() {

            this.getlistPost();

        },
         //部门单位
         deptTreeSelectPost() {
            deptTreeNoDateScope().then(response => {
                this.optionSelect = response.data;
            })
        },

        // 只能选择数据下面有children 的数据，没有children的时候禁用复选框
        normalizer(node) {
            // if (node.type == 'd') {
            //     if (node.children == undefined || node.children == null || !node.children.length) {
            //         node["children"] = undefined
            //         node['isDisabled'] = true;
            //     }

            // }

            // if (node.type == 'u') {
            //     if (node.children == null || node.children == undefined) {
            //         delete node.children;
            //     }

            // }
            // return node

        },
        //动态设置table的高度
        tableHeightData() {
            this.$nextTick(
                () => {
                    let h = document.documentElement.clientHeight
                    //     console.log(this.$refs.queryForm.$el.offsetHeight, this.$refs.refbut.$el.offsetHeight, "sdklfjklliuhaiorng")
                    h = h - 200
                    if (this.$refs.queryForm) { // 页面上如果有面包屑区域徐减去它的高度
                        h = h - this.$refs.queryForm.$el.offsetHeight
                    }

                    // if (this.$refs.refbut) { // 页面上如果有分页区域徐减去它的高度
                    //     h = h - this.$refs.refbut.$el.offsetHeight
                    // }
                    // console.log(h,"sdjfdklsjfkl")
                    this.tableHeight = h > 310 ? h : 310 // 根据自己项目定高度
                    return h
                }
            )

        },

        // 树节点单击事件
        onTreeClick(data) {
            this.isnoClick = false;
            if (data.categoryId != null) {
                this.isShow = true
            } else {
                this.isShow = false
            }

            if (data.nodeType == null || data.nodeType == "t" || data.nodeType == "f") {
                this.isnoClick = true;
                return false;

            }
            this.loading = true;
            this.queryParams = data;
            this.queryParams.pageNum = 1;
            this.queryParams.pageSize = 20;
            this.queryParams.param = this.param
            this.titleName = undefined;
            this.userValue = undefined;
            this.dateValue = undefined;
            this.valueTime = undefined;
            this.userName = undefined;
            this.getlistPost();
        },
        /** 点击树节点,获取table数据*/
        getlistPost() {
            var that = this;
            this.loading = true;
            tongjiList(this.queryParams).then(response => {
                // console.log(response, "------------------------------------------")
                this.tableData = response.data;
          
                for(var i in response.data){
                    this.countSize+=parseInt(response.data[i].SIZE)
                    // console.log(response.data[i].SIZE,"0000")
                }
               

                // this.total = response.total;
                this.loading = false;
                // this.tableHeightData();
                this.isnoClick = true;
            });
        },

        //表单重置
        resetQuery() {
            this.queryParams.searchcolumn = undefined,
            this.queryParams.jssj1 = undefined,
            this.queryParams.jssj2 = undefined,
            this.valueTime = undefined,
            this.queryParams.receivingTime = undefined,
            this.getlistPost();
        },
        //点击搜索
        handleQuery() {
            if (this.valueTime != undefined) {
                this.queryParams['jssj1'] = this.valueTime[0];
                this.queryParams['jssj2'] = this.valueTime[1]
            }
            this.getlistPost();

        },
        onChangeTap(event) {
            this.userName = event.label;
            console.log(this.userName,"-------------------")
        },
        //el-table打印
        handlePrintTap() {
            this.isprint = false;
            setTimeout(res => {
                $("input").each(function () {
                    $(this).attr('value', $(this).val());
                });

                const tableElement = document.querySelector('.custom-table');
                const iframe = document.createElement('iframe');
                iframe.style.display = 'none';
                document.body.appendChild(iframe);
                const iframeDoc = iframe.contentWindow.document;

                iframeDoc.open();
                iframeDoc.write(`
          <html>
          <head>
            <style>
              @media print {
                .h1 {
                  font-size: 28px;
                  text-align: center;
                }

                .h3 {
                  font-size: 20px;
                  text-align: right;
                }

                .table {
                  margin-top: 5px;
                  padding: 1%;
                }
                .custom-table {
                  width: 100%; /* 设置表格宽度为100% */
                  margin: 0 auto;
                  border-collapse: collapse; /* 合并单元格边框 */
                }

                .custom-table th,
                .custom-table td {
                  padding: 8px; /* 设置单元格内边距 */
                  padding:5px 5px 5px 5px;
                  align-items:center;
                  justify-content:flex-start;
                  opacity:1;
                  color:#000000;
                  letter-spacing:2px;
                  font-family:仿宋;
                  font-size:16px;
                  border: 1px solid #000; /* 设置单元格边框样式 */
                  padding: 8px; /* 设置单元格内边距 */
                  text-align: center; /* 设置单元格文本居中 */
                }
                .demo-input-suffix {
                    display: flex;
                    flex-direction: row;
                    line-height: 40px;
                }


                .titleName input {
                    font-weight: bold;
                    height: 40px;
                    line-height: 40px;
                    font-size: 16px;
                    text-align: center;
                }
                .title {
                  heigth: 5em;
                  line-height: 5em;
                  text-align: center;
                  padding:5px 5px 5px 5px;
                  align-items:center;
                  justify-content:center;
                  letter-spacing:4px;
                  font-weight:bold;
                  font-family:宋体;
                  font-size:24px;
                  opacity:1;
                  margin: 0 auto;
                  background:rgba(255, 255, 255, 0) !important;
                  border: 0 !important;
                  box-shadow:0 0 0 0 rgba(255, 255, 255, 0) !important;
                }

                .dates {
                  text-align: right;
                }

                input{
                    background:rgba(255, 255, 255, 0) !important;
                    border: 0 !important;
                    box-shadow:0 0 0 0 rgba(255, 255, 255, 0) !important;

                }
              }
            </style>
          </head>
          <body>
             ${tableElement.outerHTML}
            <script>
              window.onload = function() {
                window.print();
                window.close();
              }
            <\/script>
          </body>
          </html>
      `);
                iframeDoc.close();

                this.isprint = true;



            }, 100)
        },

        //导出
        handleExport() {
            if(this.titleName==undefined){
                this.$message({ message: '请输入自定义标题', type: 'warning' })
                    return false
            }
            if(this.userValue==undefined){
                this.$message({ message: '请选择单位名称', type: 'warning' })
                    return false
            }
            if(this.dateValue==undefined){
                this.$message({ message: '请选择日期', type: 'warning' })
                    return false
            }
            var queryParams = {};
            if (this.valueTime != undefined) {
                queryParams['jssj1'] = this.valueTime[0];
                queryParams['jssj2'] = this.valueTime[1]
            }
            queryParams['categoryId'] = this.queryParams.categoryId;
            queryParams['title'] = this.titleName
            queryParams['danwei'] = this.userName
            queryParams['riqi'] = this.dateValue
            this.download('/cqbc/tongji/exportjstj', {
                ...queryParams
            }, `config_${new Date().getTime()}.xlsx`)
        }
    }
}
</script>

<style lang="scss" scoped> /* 其他打印专用的样式 */
 .custom-table {
     width: 100%;
     /* 设置表格宽度为100% */
     margin: 0 auto;
     border-collapse: collapse;
     /* 合并单元格边框 */
 }

 .custom-table th,
 .custom-table td {
     padding: 8px;
     /* 设置单元格内边距 */
     padding: 5px 5px 5px 5px;
     align-items: center;
     justify-content: flex-start;
     opacity: 1;
     color: #000000;
     letter-spacing: 2px;
     font-family: 仿宋;
     font-size: 16px;
     border: 1px solid #000;
     /* 设置单元格边框样式 */
     padding: 8px;
     /* 设置单元格内边距 */
     text-align: center;
     /* 设置单元格文本居中 */
 }

 ::v-deep .custom-table .el-input input {
     text-align: center;

     font-size: 16px;

 }

 ::v-deep .custom-table .titleName input {
     font-weight: bold;
     height: 40px;
     line-height: 40px;
     font-size: 16px;
 }

 .demo-input-suffix {
     display: flex;
     flex-direction: row;
     line-height: 40px;
 }
</style>
